<!--表情弹窗-->
<script setup>

import GlobalDialog from "@/components/common/dialog/GlobalDialog.vue";
import {setupMapState} from "@/assets/js/vuexUtils";
import {replaceResource} from "@/assets/js/routerUtils";
import {useStore} from "vuex";
import {ref} from "vue";
import {customEmotes} from "@/assets/js/CustomEmotes";

const {emoteGroups} = setupMapState("Resources", ['emoteGroups']);
const store = useStore();
const closeDialog = (payload) => store.commit("Dialog/closeDialog", payload)

// 弹窗名称
const name = 'emote'
const emit = defineEmits(["command"])
// 点击一次之后就关闭窗口
const closeOnClick = ref(true);
// 点击事件
const click = (code) => {
  // 抛出事件
  emit('command', code);
  if (closeOnClick.value) {
    closeDialog(name)
  }
}

const onOpen = () => {
  const enable = store.state.Resources.enableCustomEmotes
  customEmoteGroups.value = customEmotes.filter(i => enable.includes(i.name)).flatMap(i => i.groups)
  console.log(customEmoteGroups.value)
}

const activeTab = ref();
// 自定义表情的分组
const customEmoteGroups = ref();
</script>

<template>
  <global-dialog :name="name" destroy-on-close width="90%" @open="onOpen">
    <template #header="{data}">
      <span style="margin-right: 10px">表情</span>
      <el-switch v-model="closeOnClick" active-text="点击表情后关闭"></el-switch>
    </template>
    <template #default="{data}">
      <el-tabs v-model="activeTab">
        <el-tab-pane v-for="group in emoteGroups" :label="group.name" lazy>
          <template v-for="emote in group.emotes">
            <el-tooltip placement="top">
              <el-image :src="replaceResource(emote.url)" class="clickable" loading="lazy" @click="click(emote.bbsCode)"/>
              <template #content>
                {{ emote.bbsCode }}
              </template>
            </el-tooltip>
          </template>
        </el-tab-pane>
        <el-tab-pane v-for="{author,name,data} in customEmoteGroups" :label="name" lazy>
          <div class="bold" style="margin-left: 10px">作者:{{ author }}</div>
          <div>
            <template v-for="item in data">
              <el-image v-if="typeof item==='string'" :src="'/attachments'+item.substring(1)" class="clickable" loading="lazy" @click="click(`[img]${item}[/img]`)"/>
              <el-tooltip v-if="typeof item==='object'" placement="top">
                <el-image :src="'/attachments'+item.img.substring(1)" class="clickable" loading="lazy" @click="click(`[img]${item.img}[/img]`)"/>
                <template #content>
                  {{ item.name }}
                </template>
              </el-tooltip>
            </template>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
  </global-dialog>
</template>

<style scoped>

</style>